<template>
	<view class="register">
		<u-notify ref="uNotify" message=""></u-notify>
		<u-modal :show="modalvariate.modalshow" :title="modalvariate.modaltitle" @confirm="modalConfirm">
			<view class="slot-content">
				<rich-text :nodes="modalvariate.modalcontent"></rich-text>
			</view>
		</u-modal>
		<view class="content">
			<!-- 主体 -->
			<view class="main">
				<u-form ref="registerForm" :model="registerModel" :rules="registerRules" errorType="border-bottom">
					<u-form-item prop="userRegisterInfo.name" borderBottom labelWidth="130rpx" label="用户名"
						ref="itemRegisterInfoName">
						<wInput v-model="registerModel.userRegisterInfo.name" type="text" placeholder="用户名"
							:focus="true">
						</wInput>
					</u-form-item>
					<u-form-item prop="userRegisterInfo.password" borderBottom labelWidth="130rpx" label="密码"
						ref="itemRegisterInfoPassword">
						<wInput v-model="registerModel.userRegisterInfo.password" type="password" placeholder="密码"
							isShowPass>
						</wInput>
					</u-form-item>
					<u-form-item prop="userRegisterInfo.qrpassword" borderBottom labelWidth="130rpx" label="确认密码"
						ref="itemRegisterInfoqrPassword">
						<wInput v-model="registerModel.userRegisterInfo.qrpassword" type="password" placeholder="确认密码"
							isShowPass>
						</wInput>
					</u-form-item>
					<u-form-item prop="userRegisterInfo.phone" borderBottom labelWidth="130rpx" label="手机号"
						ref="itemRegisterInfoPhone">
						<wInput v-model="registerModel.userRegisterInfo.phone" type="text" placeholder="手机号">
						</wInput>
					</u-form-item>
					<u-form-item prop="userRegisterInfo.email" borderBottom labelWidth="130rpx" label="邮箱"
						ref="itemRegisterInfoEmail">
						<wInput v-model="registerModel.userRegisterInfo.email" type="text" placeholder="请认真填写,可找回密码">
						</wInput>
					</u-form-item>
					<!-- #ifdef MP-WEIXIN -->
<!-- 					<u-form-item prop="userRegisterInfo.wxauthorize" borderBottom labelWidth="500rpx"
						label="是否绑定当前微信,绑定后可微信登录" ref="itemRegisterInfowxauthorize">
						<u-switch v-model="registerModel.userRegisterInfo.wxauthorize"
							@change="switchChange"></u-switch>
						</wInput>
					</u-form-item> -->
					<!-- #endif -->

				</u-form>
			</view>

			<wButton class="wbutton" text="注 册" @click="clickRegister"></wButton>

			<!-- 底部信息 -->
			<!-- 			<view class="footer">
				<text class="cuIcon"> 同意</text>
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view> -->
		</view>
	</view>
</template>

<script>
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {
		createdOrdinaryUserApi
	} from '@/api/users.js'
	export default {
		name: 'Register',
		components: {
			wInput,
			wButton,
		},
		data() {
			//注册表单
			const registerModel = {
				userRegisterInfo: {
					name: "",
					photo: "https://api.femacise.cn/ico/tx.png",
					password: "",
					qrpassword: "",
					roleid: 0,
					phone: "",
					email: "",
					wxid: "",
					wxauthorize: false
				}
			}
			//注册验证
			const registerRules = {
				'userRegisterInfo.name': {
					type: 'string',
					required: true,
					min: 3,
					max: 10,
					message: '请填写用户名3-10位长度',
					trigger: ['blur', 'change']
				},
				'userRegisterInfo.password': {
					type: 'string',
					required: true,
					min: 6,
					max: 16,
					message: '请填写密码6-16位长度',
					trigger: ['blur', 'change']
				},
				'userRegisterInfo.qrpassword': [{
					validator: (rule, value, callback) => {
						if (value !== this.registerModel.userRegisterInfo.password) {
							return false
						} else {
							return true
						}
					},
					message: '两次密码必须输入一致'
				}],
				'userRegisterInfo.phone': [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value)
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}],
				'userRegisterInfo.email': [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
							.test(value)
					},
					message: '邮箱格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}]
			}
			//注册验证
			const registerRulesbak = {
				'userRegisterInfo.phone': [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value)
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}],
				'userRegisterInfo.email': [{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
							.test(value)
					},
					message: '邮箱格式不正确',
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}]
			}
			//u-modal 弹出层使用的变量
			const modalvariate = {
				modalshow: false,
				modaltitle: '',
				modalcontent: ''
			}
			return {
				registerModel,
				registerRules,
				modalvariate
			}
		},
		methods: {
			//注册事件
			clickRegister() {
				this.$refs.registerForm.setRules(this.registerRules)
				this.$refs.registerForm.validate().then(res => {
					createdOrdinaryUserApi(this.registerModel.userRegisterInfo).then(res => {
						if (res.code === 1) {
							this.modalvariate.modaltitle = '注册成功'
							this.modalvariate.modalcontent = '注册成功点击确定返回登录页面'
							this.modalvariate.modalshow = true
						} else {
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: res.msg,
								safeAreaInsetTop: false
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			switchChange(e) {
				if (e) {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (loginRes) => {
							this.registerModel.userRegisterInfo.wxid = loginRes.code
							console.log(loginRes.code)
						}
					})
				} else {
					this.registerModel.userRegisterInfo.wxid = ''
				}
			},
			//注册成功弹出框确定事件
			modalConfirm() {
				uni.$u.route({
					url: 'pages/mycenter/mycenter',
					type: "switchTab"
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.registerForm.setRules(this.registerRules)
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					this.registerModel.userRegisterInfo.wxid = loginRes.code
				}
			})
			// #endif
		}
	}
</script>

<style>
	@import url("@/common/css/icon.css");
	@import url("@/common/css/main.css");
</style>